<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common-list.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<header>
		<div class="header-con">
			<a class="navbar-header" href="">
				<img src="../images/logo.png" alt="">
			</a>
			<ul>
				<li>
					<a href="" class="open-menu">首页</a>
				</li>
				<li>
					<a href="">人资管理</a>
				</li>
				<li>
					<a href="">指标设置</a>
				</li>
				<li>
					<a href="">数据统计</a>
				</li>
				<li>
					<a href="">工作时设置</a>
				</li>
				<li>
					<a href="">财务管理</a>
				</li>
			</ul>
		</div>
		<div class="peo-message">
			<div class="peo-cir">
				<!-- <img src="" alt=""> -->
			</div>
			<em>黑披士</em>
			<span class="down-list"></span>
			<!-- <ul>
				<li>123</li>
			</ul> -->
		</div>
	</header>
	<div class="boxed clearfix">
		<div class="common-tit">
			<h2>财务明细</h2>
			<span>财务管理 > 财务明细</span>
		</div>
		<div class="finance-box">
			<div class="basic">
				<h3>
					<i>资产明细</i>
				</h3>
			</div>
			<div class="fi-asbox">
				<ul class="fi-assets">
					<li>
						<span>工作室收入总计:</span>
						<em>100,000</em>
						<span>元</span>
					</li>
					<li>
						<span>工作室课消总计:</span>
						<em>100,000</em>
						<span>元</span>
					</li>
					<li>
						<span>工作室支出总计:</span>
						<em>100,000</em>
						<span>元</span>
					</li>
					<li>
						<span>工作室余额:</span>
						<em>100,000</em>
						<span>元</span>
					</li>
				</ul>
			</div>
		</div>
		<!--  -->
		<div class="finance-box">
			<div class="basic">
				<h3>
					<i>月支出明细</i>
					<div class="date-lbox">
						<div class="date-box1">
							<input type="text" class="date-list1" readOnly="true" placeholder="起始时间">
						</div>
						<b> - </b>
						<div class="date-box2">
							<input type="text" class="date-list2" readOnly="true" placeholder="结束时间">
						</div>
					</div>
				</h3>
			</div>
			<div class="market clearfix">
				<div class="list-box">
					<div class="downbtn">
						<span>分店列表</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li>测试测试</li>
						<li>我们</li>
						<li>测试测试测试测试测试</li>
						<li>asdfasdfsaf	</li>
					</ul>
				</div>
				<div class="list-box" id="branchType">
					<div class="downbtn">
						<span>收支</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li>收入</li>
						<li>支出</li>
					</ul>
				</div>
				<div class="list-box" id="incomeDetail">
					<div class="downbtn">
						<span>收入／支出类型</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li>收入</li>
						<li>收入</li>
						<li>收入</li>
						<li>收入</li>
						<li>收入</li>
					</ul>
				</div>
				<div class="list-box" id="payDetail">
					<div class="downbtn">
						<span>收入／支出类型</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li>支出</li>
						<li>支出</li>
						<li>支出</li>
						<li>支出</li>
						<li>支出</li>
					</ul>
				</div>
			</div>
			<div class="indi-con">
				<div class="scrollbox fina-nos">
					<table>
						<thead>
							<tr>
								<th class="finan-time">时间</th>
								<th class="finan-bop">收支</th>
								<th class="finan-type">类型</th>
								<th class="finan-money">金额</th>
								<th class="finan-bname">分店名</th>
								<th class="sta-operation">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>2016.02</td>
								<td>收入</td>
								<td>主营业务收入</td>
								<td>100,000</td>
								<td>不知道几个字呢</td>	
								<td class="sta-operation">
									<span>[</span>
									<em>编辑</em>
									<span>]</span>	
									<div class="remarks-de">
										<em>备注</em>
										<div>
											<i></i>
											<b>备注:</b>
											<p>这里是备注的内容，字体的颜色只是把透明度调为了80%，听说这里是没有字数限制，可以无限的一直写下去。</p>
										</div>
									</div>
								</td>
							</tr>
							<tr>
								<td>2016.02</td>
								<td>收入</td>
								<td>主营业务收入</td>
								<td>100,000</td>
								<td>不知道几个字呢</td>	
								<td class="sta-operation">
									<span>[</span>
									<em>编辑</em>
									<span>]</span>	
									<div class="remarks-de">
										<em>备注</em>
										<div>
											<i></i>
											<b>备注:</b>
											<p>这里是备注的内容，字体的颜色只是把透明度调为了80%，听说这里是没有字数限制，可以无限的一直写下去。</p>
										</div>
									</div>
								</td>
							</tr>
							<tr>
								<td>2016.02</td>
								<td>收入</td>
								<td>主营业务收入</td>
								<td>100,000</td>
								<td>不知道几个字呢</td>	
								<td class="sta-operation">
									<span>[</span>
									<em>编辑</em>
									<span>]</span>	
									<div class="remarks-de">
										<em>备注</em>
										<div>
											<i></i>
											<b>备注:</b>
											<p>这里是备注的内容，字体的颜色只是把透明度调为了80%，听说这里是没有字数限制，可以无限的一直写下去。</p>
										</div>
									</div>
								</td>
							</tr>
							<tr>
								<td>2016.02</td>
								<td>收入</td>
								<td>主营业务收入</td>
								<td>100,000</td>
								<td>不知道几个字呢</td>	
								<td class="sta-operation">
									<span>[</span>
									<em>编辑</em>
									<span>]</span>	
									<div class="remarks-de">
										<em>备注</em>
										<div>
											<i></i>
											<b>备注:</b>
											<p>这里是备注的内容，字体的颜色只是把透明度调为了80%，听说这里是没有字数限制，可以无限的一直写下去。</p>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<!--  -->
		<div class="finance-box">
			<div class="basic">
				<h3 class="fi-nob">
					<i>月支出总结</i>
				</h3>
			</div>
			<div class="indi-con">
				<div class="scrollbox fi-not">
					<table>
						<thead>
							<tr>
								<th class="fina-turnover">本月营业额(元)</th>
								<th class="fina-cf">本月课消(元)</th>
								<th class="fina-course">本月支出(元)</th>
								<th>本月盈亏(元)</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>300,000</td>
								<td>300,000</td>
								<td>196,000</td>
								<td>30,000</td>
							</tr>
							<tr>
								<td>300,000</td>
								<td>300,000</td>
								<td>196,000</td>
								<td>30,000</td>
							</tr>
							<tr>
								<td>300,000</td>
								<td>300,000</td>
								<td>196,000</td>
								<td>30,000</td>
							</tr>
							<tr>
								<td>300,000</td>
								<td>300,000</td>
								<td>196,000</td>
								<td>30,000</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	<script src="../js/common-list.js"></script>
	<script>
		$(function(){
			$('.date-list1').date_input();
			$(".date-list2").date_input();
		});
		$("#branchType li").on("click", function() {
			if ($(this).text() == "收入") {
				$("#incomeDetail").css({
					"display" : "block"
				});
				$("#payDetail").css({
					"display" : "none"
				});
			} else if ($(this).text() == "支出") {
				$("#incomeDetail").css({
					"display" : "none"
				});
				$("#payDetail").css({
					"display" : "block"
				});
			} else {
				$("#incomeDetail").css({
					"display" : "none"
				});
				$("#payDetail").css({
					"display" : "none"
				});
			}
		})
	</script>
</body>
</html>